53 — 什么是 React 和 React Three Fiber

Three.js Journey · Bruno Simon · 难度：简单

53 — 什么是 React 和 React Three Fiber 课程海报

简介

到目前为止，我们一直在学习 Three.js，用纯 JS 创建 Web 应用。然而，有时我们需要把 Three.js 集成到非常特定的环境中，比如说，某个框架里。

如今最流行的框架之一就是 React，我们将学习如何把 Three.js 集成到其中。

虽然这可能被视为一种约束，但 React 实际上让创建 Three.js 应用的过程变得容易得多。

如果你不了解 React，正打算离开，别担心，我们会在下一课中一起学习它。

React

正如我们前面提到的，React 是一个框架，但按照官网的说法，React 实际上是一个库，其用途是创建用户界面。

其理念是用 JSX（一种与 HTML 非常相似的基于标签的语言）编写代码，然后它会被编译成一个网站，包含通常的内容，如页眉、页脚、一些文本、列表等。

“与写 HTML 没多大区别”，你可能会这么想。

关键在于：当数据发生变化时，UI 会自动改变，而你什么都不用做。换句话说，UI 会对数据“做出反应”。我们也将这种现象称为“data-binding”。

除此之外，React 还集成了许多能让开发者更轻松的工具。除了能轻松地应用结构之外，你还能把应用的各个部分连接起来，并在发生变化时收到通知。

React 很棒，因为它不仅允许你创建显示数据频繁变化的网站，还得益于众多工具及其固有的结构。这就是为什么我们也会把 React 称作框架。

另请注意，尽管我们一直在把 React 当作构建网站的方式（因为 Three.js 是面向 Web 的）来讨论，但 React 可以用来构建更多东西。

有一些替代方案，比如 Vue.js 和 Svelte，但它们不那么流行，而且 Three.js 与这些替代方案的集成不如与 React 那样好。

如今，React 如此流行，以至于它是你工具集中必备的，尤其是当你在找工作或想融入团队时。

缺点

听起来很棒，对吧？好吧，我应该指出有几个缺点需要考虑：

React Three Fiber

前面我们提到，Three.js 与 React 集成得很好，这要归功于 React Three Fiber。

在试图用长篇大论说服你之前，先看看这些示例：

React Three Fiber 就是我们所说的 React renderer。renderer 背后的理念是你用 JSX（我们前面提到的基于标签的语言）编写代码，然后数据会被转换成别的东西（在我们的例子中是一个 Three.js 场景）。

React Three Fiber 还会为我们处理很多默认设置，并很好地利用 React 工具。

它自 2019 年问世以来，从未停止过发展和改进。自其版本 8（2022 年 5 月）以来，它被认为非常稳定，语法和结构不应变化太大。

写“React Three Fiber”有点繁琐，但我们可以写成“R3F”或直接写成“Fiber”。从现在起我们用 R3F。

关于 R3F 的一些链接：

作者

R3F 由 Paul Henschel 创建，他也被称为 0xca0a：

Paul 是 Poimandres（PMNDRS）的创始人和管理者，这是一个开发者开源集体，是我们在接下来的课程中将要使用的许多库的起源。

引用 Paul 的话：“Poimandres 背后的理念是组建一个集体，开发者可以加入其中，互相帮助。它还用于资助、突出和推广项目。”

一些链接：

我请 Paul 就 R3F 以及他为什么创建它说几句话。以下是他的一段话：

“多年前我开始接触 WebGL 和 Three.js 时，前景黯淡。我想做我在周围看到的、由那些产出高质量作品的机构做的东西，但他们很少，甚至从不分享。

至于 Stackoverflow、discourse 等，信息远远不足以让我稍微触及它。每个项目都让我陷入没完没了的子任务，一个比一个难，尤其是因为我缺乏扎实的数学背景。随着时间推移，这让我失去了乐趣，因为哪怕只是尝试新东西的念头都会让我害怕。

然而，在通用的前端领域，情况完全不是这样，没有人需要在所有方面都是专家。我们习惯于分享，而且有很好的方式来做这件事：组件。对于 Web 开发者来说，选用任意一个包并使用它，或者把功能包装起来分发出去让别人受益，都是轻而易举的。

在 WebGL 和 Three.js 中，除了分散的专用库和 three/examples 之外，我总觉得缺少了些什么。

react-three-fiber 的整个理念就是给 Three.js 更好的分享方式，并把复杂的功能打包成自包含的单元。

我希望此后积累起来的组件能改变初学者的前景：Three.js 不必让人望而生畏，即使没有正式的背景，你也可以选择自己的战斗，学习你感兴趣的东西，同时能够把那些别人已经攻克过、然后分享出来的东西拼装到你的应用里。”

目录

现在我们将开启关于 React 和 React Three Fiber 的章节。

以下是接下来你将学到内容的概览：

1. 第一个 React 应用

在这一课中，我们将暂时忘掉 Three.js，专注于 React。

这一课对初学者非常友好，如果你这辈子从未接触过 React，你来对地方了。

我们将学习基础知识，以便能够使用 R3F，但也会再深入一点，这样我们就能很好地理解这个库，从而在真实项目中使用它。

2. 第一个 R3F 应用

在这一课中，我们将学习 R3F 是什么、如何安装它以及如何使用它。

3. Drei

如前所述，R3F 也关乎代码共享。

人们一直在创建大量的 helper（我们这样称呼它们），其中大多数被归入我们所说的 Drei 之下。

这是一座预制组件的金矿，随时可用。

4. 调试

我们已经在 Debug UI 和 Performance tips 课程中学习了调试 Three.js 应用的解决方案，但 R3F 和 React 让更多解决方案成为可能。

我们将介绍一个新的 Debug UI 库，还有一个新的监控库。

5. 环境与布景

有很多方法能让你的场景看起来很棒。

在这一课中，我们将讨论三个重要的元素：灯光、阴影和环境贴图。

我们已经在原生 Three.js 中处理过这些内容，但你会看到，用 R3F 实现它们变得更加出色。

6. 加载模型

一个经典的例子是加载一个模型并显示它。是的，用 R3F 变得更容易了。

7. 3D 文字

为了理解原生 Three.js 与 R3F 之间的差异，我们将重做一些课程。

8. 传送门

这是另一个我们重做之前课程的练习。这一次，我们将实现传送门场景。

9. 鼠标事件

R3F 最受赞赏的功能之一是它处理鼠标事件的方式。其实我们应该说“pointer”事件，因为 R3F 也管理触摸设备。

你还记得 Raycaster 以及我们不得不采用的那些技巧吗？现在已经成过去了。

10. 后期处理

后期处理也是同样的情况。你还记得 EffectComposer 以及我们不得不实现的那一道道 pass 吗？好吧，现在后期处理会容易得多，而且性能也更好。

11. 有趣而简洁的作品集

在这一课中，我们将创建一个新项目。它将包含一个迷你作品集，我们会用一些技巧以最少的功夫让它看起来很棒。

12. 使用 R3F 的物理

最难的课程之一就是添加物理的那一课，这很令人扫兴，因为它是我们能在 3D 网站上拥有的最酷的功能之一。

同样，R3F 会让事情容易得多，这也将是一个机会，去认识一个名为 Rapier 的新物理库。

13. 用 R3F 创建一个游戏

最后，为了把我们学到的一切汇集到一个项目中，我们将创建一个小游戏。